<template>
	<view class="withdraw">
		<u-form :model="form" ref="uForm">
			<view class="exchange flex_space_b">
				<block v-for="(item,index) in this_config" :key="index">
					<view class="jifen_item" :class="jifenActive == index ? 'active' : ''" @click="selectItem(index)">
						<view class="cash">￥<text>{{item.jifen_quan_money}}</text></view>
						<view class="integral">{{item.jifen_num}}积分兑换</view>
					</view>
				</block>
			</view>
			
			<view class="formItem mTop2">
				<u-form-item label="返还消费积分" label-width="260">
					<view class="text">{{fan_jifen_amount}}</view>
				</u-form-item>
				<u-form-item label="贡献值" label-width="260">
					<view class="text blueText">{{fan_quan_amount}}</view>
				</u-form-item>
			</view>
		</u-form>
		
		<view class="bottoBox">
			<button class="btn" type="default" @click="submit">申请兑换</button>
		</view>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	var common_utils = require('../../common/common_utils.js');
	export default {
		data() {
			return {
				form: {
					bank_name: '',
					bank_card_no: '',
					bank_user_name: '',
					jifen_num:0,
					arrival_amount:0
				},
				this_fee:0,
				this_config:[],
				jifenActive: null,
				fan_jifen_amount:0,
				fan_quan_amount:0
			}
		},
		onLoad(options) {
			this.loadData(true);
		},
		methods: {
			loadData: function(is_flush){
				// 加载数据
				var that = this;
				util.requestPost("api.php/Integral/getConfig", {}, function(res) {
					that.this_fee = res.data.this_exchange_config.this_fee || 0;
					that.this_config = res.data.this_exchange_config.this_config || [];
				},is_flush);
			},
			selectItem:function(index){
				let this_money = parseFloat(this.this_config[index].jifen_money);
				this.form.jifen_num = this.this_config[index].jifen_num;
				this.form.arrival_amount = (this_money - this_money*(this.this_fee/100)).toFixed(2);
				this.fan_jifen_amount = this.this_config[index].jifen_money;
				this.fan_quan_amount = this.this_config[index].jifen_quan_money;
				this.jifenActive = index;
			},
			goRecord () {
				uni.navigateTo({
					url: '/pages/my/withdrawRecord'
				})
			},
			submit(){
				let that = this;
				util.requestPost("api.php/Integral/confirmExchange", that.form, function(res) {
					uni.showModal({
						title: '提示',
						content: res.msg,
						showCancel: false,
						success: function(res) {
							uni.switchTab({
								url:'/pages/my/my'
							});
						}
					});
				},true);
			}
		}
	}
</script>

<style scoped lang="scss">
.withdraw {
    min-height: 100%;
    background-color: var(--bgColor);
    padding-bottom: 60px;
}

.recordBox {
	padding: 12rpx;
	color: var(--primaryColor);
	overflow: hidden;
	text-align: center;
}

.exchange {
	padding: 20rpx 20rpx 0 20rpx;
	background-color: #FFFFFF;
	flex-wrap: wrap;
	.jifen_item {
		width: 49%;
		border: 1px solid #f3f4f6;
		margin-bottom: 20rpx;
		padding: 20rpx 10rpx;
		border-radius: 10rpx;
		text-align: center;
		&.active {
			border:1px solid #fe0000;
			background-color: rgba(207, 13, 13, 0.06);
		}
		.cash {
			color: var(--primaryColor);
			font-size: 28rpx;
			text {
				font-size: 48rpx;
			}
		}
		.integral {
			font-size: 28rpx;
			color: #666;
		}
	}
}

.formItem {
	background-color: #FFFFFF;
	padding: 0 20rpx;
	.text {
		color: var(--primaryColor);
	}
	.blueText {
		color: $u-type-primary;
	}
	.weixin {
		// padding: 20rpx 0;
		// line-height: 70rpx;
		.label {
			width: 160rpx;
			padding-right: 10rpx;
		}
		.image {
			width: 100rpx;
			height: 100rpx;
		}
	}
}

.bottoBox {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #FFFFFF;
	padding: 20rpx;
	.btn {
		border-radius: 48rpx;
		border: none;
		background-color: var(--primaryColor);
		color: #FFFFFF;
		font-size: 32rpx;
	}
}

.QrBox {
	padding: 68rpx 0;
	text-align: center;
	.image {
		width: 400rpx;
		height: 400rpx;
	}
	.text {
		margin-top: 32rpx;
		font-size: 28rpx;
		color: #2979ff;
	}
}
</style>
